<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>

<html>
<head>
    <title>更新用户信息</title>
    <link rel="stylesheet" rel="stylesheet" href="/static/css/edit.css">
    <script type="text/javascript" src="/static/js/jquery-3.4.1.js"></script>
</head>
<body>
<div class="b-body">
    <div align="center" class="b-center" style="position: fixed;top: 80px">
        <div class="img">
            <a href="#" class="p-guanbi">
                <img src="/static/images/popup_guanbi.png"/>
            </a>
        </div>
        <table border="1" width="47%" height="250" style="border-width: 0px;">
            <tr>
                <td style="border-style: none; border-width: medium">
                    <form class="contact_form" id="userUpdate">
                        <ul>
                            <li>
                                <h2>更新用户信息</h2>
                            </li>
                            <li>
                                <label>序号:</label>
                                <input type="text" name="userId" placeholder="序号" required/>
                            </li>
                            <li>
                                <label>名称:</label>
                                <input type="text" name="userName" placeholder="名称" required/>
                            </li>
                            <li>
                                <label>密码:</label>
                                <input type="text" name="userPassword" placeholder="密码" required/>
                            </li>
                            <li>
                                <label>电子邮件:</label>
                                <input type="email" name="userEmail" placeholder="xxxxxxx@xxx.com"
                                       required/>
                                <span class="form_hint">正确格式为：xxxxx@xxx.com</span>
                            </li>
                            <li>
                                <label>住址:</label>
                                <input type="text" name="userAddress" placeholder="住址" required/>
                            </li>
                            <li>
                                <label>简介:</label>
                                <textarea name="userIntro" cols="40" rows="6" placeholder="个人简介" required
                                ></textarea>
                            </li>
                            <li>
                                <label>权限:</label>
                                <input type="text" name="userLevel" placeholder="权限" required/>
                            </li>
                            <li>
                                <button class="submit" type="button" onclick="userUpdateAjax()">修改</button>
                                <button class="submit" type="reset">清空</button>
                            </li>
                        </ul>
                    </form>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
<script>

    // 点击关闭按钮
    $(".p-guanbi").click(function () {
        $(".b-center").hide();
    })

    function userUpdateAjax() {
        $.ajax({
            url: '/userUpdate',
            method: 'post',
            data: $('#userUpdate').serialize(),
            dataType: 'json',
            success: function (data) {
                alert(data.info)
                if (data.info == "更新用户成功") {
                    $(".b-center").hide();
                    getUsers();
                }
            },
            error: function () {
                alert("请求出错")
            }
        })
    }
</script>
</html>